<template>
	<view class="book">
		<view class="bookItem"
			v-for="(item,index) in dataList"
			:key='index'
		>
			<image class="bookImg" :src="item.imgUrl"></image>
			<view class="bookContent">
				<text class="bookName">{{item.name}}</text>
				<view>
					<text class="pprice">￥{{item.pprice}}</text>
					<text class="oprice">￥{{item.oprice}}</text>
				</view>
				<text class="discount">{{item.discount}}折</text>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default{
		props:{
			dataList:Array
		}
	}
</script>

<style>
	.book{
		/*display: flex;
		flex-wrap: wrap;*/
		position:relative;
	}
	.bookItem{
		width: 340rpx;
		/*padding-bottom: 20rpx;*/
		float: left;
		padding: 10rpx 10rpx 10rpx 20rpx;
	}
	.bookImg{
		width: 100%;
		height: 375rpx;
		border-radius: 20rpx;
	}
	.bookContent{
		text-align: center;
	}
	.bookName{
		overflow: hidden;
		text-overflow:ellipsis;
		display: -webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		color: #333333;
		word-break: break-all;
		padding: 0rpx 20rpx;
	}
	.oprice{
		text-decoration: line-through;
		font-size: 24rpx;
		color: #999999;
	}
	.discount{
		border-radius: 4rpx;
		border: 2rpx solid #FF3333;
		padding: 2rpx 10rpx;
		font-size: 20rpx;
		color: #FF3333;
	}
</style>
